<template>
    <div class="center">
      <div class="cart-container">
        <img
          class="gouwuche"
          @click="toggleDrawer"
          src="Cart.png"
          alt=""
        />
        <div class="total-count">{{ calculateTotalItems }}</div>
      </div>
      <h3 style="margin-right:10px">Order Status</h3>
    </div>
    
    <el-drawer
      v-model="drawer"
      title="Order Status"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-timeline style="max-width: 600px">
        <el-timeline-item v-for="(activity, index) in activities" :key="index">
          <h2 :style="{ color: activity.time ? 'black' : 'gray' }">
            {{ activity.content }}
            <span v-if="activity.time"> - {{ activity.time }}</span>
          </h2>
          <div class="item" v-if="activity.showProduct">
            <div>Cinnamon and Cocoa</div>
            <div class="qiu">2</div>
          </div>
          <div class="item" v-if="activity.showProduct2">
            <div>Cinnamon</div>
            <div class="qiu">2</div>
          </div>
        </el-timeline-item>
      </el-timeline>
      
      <div class="footer">
        <div class="footer_item">
          <span>总金额 {{ totalAmount }}</span>
        </div>
        <div class="footer_item">
          <span>折扣减额</span>
        </div>
        <div class="footer_item blod">
          <span>结算金额 {{ totalAmount }}</span> 
        </div>
        <div class="bottom">
          <div class="yuan">></div>
          <div>.....滑动关闭....</div>
          <div class="yuan xu">√</div>
        </div>
      </div>
    </el-drawer>
  </template>
   
  <script>
  import { mapState } from 'vuex';
   
  export default {
    name: 'CoffeeCart', 
    data() {
      return {
        drawer: false,
        direction: 'rtl',
        activities: [
          {
            content: 'Ordered',
            time: 'JUST NOW',
            showProduct: true,
            showProduct2: false,
          },
          {
            content: 'Approved',
            time: '12 MINS AGO',
            showProduct: false,
            showProduct2: true,
          },
          {
            content: 'Finishing.',
            showProduct: false,
            showProduct2: false,
          },
          {
            content: 'Served',
            showProduct: false,
            showProduct2: false,
          },
        ],
      };
    },
    computed: {
      ...mapState({
        coffees: state => state.coffees,
      }),
      totalAmount() {
        return this.coffees.reduce((total, category) => {
          return total + category.details.reduce((total, detail) => {
            return total + (detail.quantity * detail.price);
          }, 0);
        }, 0);
      },
      calculateTotalItems() {
        return this.coffees.reduce((total, category) => {
          return total + category.details.reduce((total, detail) => {
            return total + detail.quantity;
          }, 0);
        }, 0);
      },
    },
    methods: {
      toggleDrawer() {
        this.drawer = !this.drawer;
      },
      handleClose(done) {
        done();
      },
    },
  };
  </script>
   
  
  <style>
  .el-timeline-item h2 {
    text-align: left; 
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-drawer__body {
    display: flex;
    flex-direction: column;
  }
  .el-drawer__title {
    display: flex;
    font-size: 40px;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
   
  .cart-container {
    position: relative;
    display: inline-block;
  }
   
  .gouwuche {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .qiu {
    width: 20px;
    height: 20px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
  }
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .footer {
    background: #e2e1e1;
    padding: 20px;
  }
  .footer_item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
  }
  .blod {
    font-weight: 900;
    font-size: 20px;
  }
  .bottom {
    color: rgb(245, 162, 176);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .yuan {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
  }
  .xu {
    background: #efefef;
    color: red;
  }
  .total-count {
    position: absolute;
    top: -10px; /* 根据需要调整 */
    right: -10px; /* 根据需要调整 */
    background-color: rgba(245, 8, 8, 0.8); /* 背景色，稍带透明度 */
    padding: 5px 10px;
    border-radius: 50%; /* 可选：使背景形状为圆形 */
    font-size: 14px; /* 根据需要调整 */
    color: #fcfbfb; /* 字体颜色 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 可选：添加阴影 */
  }
   
  </style>